<template>
  <div class="home-example">
    <a :href="baseUrl" class="online-link">Online Example</a>
    <img width="300" src="https://gitee.com/emeker/mk-ui/raw/master/static/example.png">
    <display></display>
  </div>
</template>
<style lang="scss" >
.home-example {
  position: relative;
  width: 348px;
  margin: 50px auto;
  overflow: hidden;
  text-align: center;
  .online-link,
  img {
    display: inline-block;
    margin-bottom: 20px;
  }
  .page-display {
    width: 100%;
    .display-wrapper {
      position: static;
      transform: none;
    }
  }
}
</style>
<script>
import Display from '../display/display.vue'
export default {
  name: 'home-example',
  mixins: [],
  data() {
    return { baseUrl: 'http://emeker.gitee.io/mk-ui/docs/example/index.html#/' }
  },
  components: {
    Display
  }
}
</script>
